- Preface
- Markup Languages – A Definition and Some History
- Beginning HTML
- HTML Lists
- HTML Tables
- HTML - Color, Fonts and Special Characters
- HTML Links
- HTML Images
- HTML Frames
- Cascading Style Sheets
- MicroSoft PhotoDraw
- JavaScript
- HTML Forms and Form Handling
- VBScript
- MicroSoft FrontPage
- Active Server Pages
- Java Applets
- XML Meaning and More
- Macromedia Flash 5.0
- References
|
Providing links to other pages is what http (HyperText Transfer Protocol) is all about.
Hyperlinks allow the user to obtain more information about a topic at will.
While hyperlinks are very useful, the use of hyperlinks is not without its problems.
One problem involves the design of a website. For centuries, people have written
documents and read documents in a mostly linear fashion. When designing webpages,
you must keep in mind that readers of the webpages will most likely not read the pages
in a linear fashion, or even read any page in its entirety. Another problem is that,
unless a website is very thoughtfully designed, a reader of the pages may get lost, or
feel disoriented when they can’t find a certain page again,
or cannot get back to previous information easily.
7.1 Links to Other Pages
There are two ways to link to other webpages: (1) absolute links and
(2) relative links. Absolute links contain the full specification of the URL for a page.
Absolute links are required when providing a link to a page on another server. Relative
links can be used when providing a link for a page that exists on the same
server as the current page. Relative links contain a partial specification of the
URL of a webpage. If the linked webpage is in the same directory (or folder)
as the current page, only the file name needs to be specified in the link.
- In order to link to another page on the same site,
we need to create a second HTML file. Open a new file in
Notepad and create a new HTML page that contains the following:
<html>
<head>
<title>my second webpage </title>
</head>
<body>
<h1> Additional Information </h1>
Blah, blah, blah…
</body>
</html>
- Save this file as “second.htm” in the same directory or folder as your
first page and view it in a browser. It should look like this:
- Now, open your first HTML page in Notepad and
go to the bottom of the file, but before the ending BODY tag.
Links are placed on an HTML page using anchor tags, <A> … </A>.
The beginning anchor tag takes a very important attribute,
HREF (hypertext reference). The value of the HREF tag is the
name of a file, a relative directory path or a complete URL.
The text placed between the beginning and ending tags will be
the link that appears on the current page.
Open your first.htm file and add the following to the bottom of that page (but
before the ending BODY tag:
<A HREF = "second.htm"> Go to next page. </A>
- Save your file and view it. Note that the text in
between the beginning and closing anchor tags is a
different color than the rest of the plain text on the
page and is underlined. Click on the text and the
new page should appear. Using the browser’s “back” button,
go back to your first page. Note that the color of the link
text has changed to indicate that you have followed that link.
- Let’s add a link to a page on the internet.
Add the following to the bottom of your first webpage:
<BR><BR>
Go to the
<A HREF = “http://www.w3schools.com/html/html_colors.asp”>
Colors
</A> page.
<BR><BR>
- Note that this time, only the word Colors
appears underlined and in a different color.
Click on the link to make sure that the link works.
7.2 Links to Sections of the Same Page
Sometimes you may want to provide the means for the user to
jump to another section of the current page or to a section of
another page. This is done by inserting labels into the document
at points for which you want to provide this functionality. The
links that will provide easy access to a section of document use the
label in the anchor tag. If the link is a jump to a section of the current
page, a pound sign (#) followed by the label is used in place of the URL
in the beginning anchor tag. If the link is to a section of another document
in the same directory, the URL in the beginning anchor tag uses the filename
followed by the pound sign and the label. If the link is to a section of a
document that is on another server, the complete URL followed
by the pound sign and the label is used.
- First, let’s insert some labels in our first HTML page.
Open the page in Notepad. Find the location of the
definition list which contains the CIS course descriptions.
Locate your cursor on the line that contains the Heading
“CIS course descriptions”. Labels are added to a long
document using the anchor tag and the NAME attribute.
The value of the NAME attribute is one of your choosing.
Add the following anchor tags so that the heading is
between the beginning and closing anchor tags:
<A NAME = “cisdescriptions”> <h2>
CIS course descriptions
</h2> </A>
- Save your file and view it in a browser. Note that
inserting a label does not change the appearance of the document in a
browser. Insert another label above the meal listing within the
<PRE< … </PRE< tags. Above the beginning <PRE> tag,
insert the following:
<A NAME = “meals”> <h2>
My diet today
</h2> </A>
- Now, position your cursor just below the beginning
BODY tag in the file. Here, we will provide quick links to
the CIS Course Descriptions and today’s meals. Links to
another section of the current document use a pound sign
followed by the label name in place of a file name or a URL.
Add the following just under the beginning BODY tag:
Quick Links to Important Sections of this Page
<A HREF = “#cisdescriptions”>
CIS Course Descriptions
</A> |
<A HREF = “#meals”>
My diet today
</A>
<BR>
- Save the file and view it in a browser. It should appear as shown below.
Make sure that the links appear correctly.
Click on each one to make sure that it works.
- Next, we will add links to these same sections
in your other HTML file that should be saved as “second.htm”.
Open “second.htm” in Notepad. At the bottom of the file,
before the ending BODY tag, add the same code as above in
step 3. Since these links point to sections in another file, we
need to add the file name before the labels. Edit the code to
include the file name, “first.htm” before the labels. The code
added to second.htm should be the following:
Quick Links to Important Sections of this Page
<A HREF = “first.htm#cisdescriptions”>
CIS Course Descriptions
</A> |
<A HREF = “first.htm#meals”>
My diet today
</A>
<BR>
- Save this file and view it in a browser.
Make sure that the links appear correctly
and that they work correctly.
7.3 Changing the Colors of the Links on a Page
The appearance of the links on your page can be altered
from the standard underlined blue text. However, you should
bear in mind that a significant deviation from the standard look
may confuse your readers. If you decide to make links look the
same as non-link text, the readers will not realize that these are
potentially useful links. On the other hand, if you choose to
underline portions of text or choose a different color for some
text, the readers may think that these are links and be disappointed
when they try to click on them. The appearance of links in a page
can be altered by the LINK, ALINK and VLINK attributes of the
BODY tag. The values for these attributes are HTML color names
or an RGB color specification number as described earlier. The
LINK attribute affects the color of unvisited links. The ALINK
attribute affects the color of a clicked link while the browser is
loading the linked page. If the next page loads very quickly, this
color will not be seen. The VLINK attribute affects the color of
links that the reader has visited.
- Try adding the LINK, ALINK and VLINK
attributes and different values for the attributes, to the
body tag of one of your HTML documents. Be sure to
select colors that are distinguishable from each other so
that you can observe the effect of the changes. You might
want to try the following:
<body LINK = "#FF0000" ALINK = "#00FF00" VLINK = "#0000FF">
References
- A Beginner's Guide to HTML
http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerPrintable.html
- HTML: A Guide For Beginners
http://www.geocities.com/Baja/4361/index.html
- HTML: An interactive guide for beginners.
http://www.davesite.com/webstation/html/
- HTML and XHTML Information
www.w3c.org/markup
- HTML reference including browser support
http://www.w3schools.com/html/html_reference.asp
- W3Schools HTML Tutorials
http://www.w3schools.com/default.asp
- Willcam’s Comprehensive HTML Cross Reference
http://www.willcam.com/cmat/html/crossref.html
- Anderson-Freed, S. (2002) Weaving a Website: Programming in HTML, Javascript, Perl and Java. Prentice-Hall:NJ. ISBN 0-13-028220-0
|